<!--
 * @Author: your name
 * @Date: 2021-12-30 09:27:09
 * @LastEditTime: 2022-01-06 14:36:12
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \project_am-master\am-ui\src\pages\am\order\Repairs.vue
-->
<template>
  <div class="repairs">
    <div class="header">我要报修</div>
    <el-form ref="form" 
    :model="form" 
    label-width="80px"
    style="margin-top:20px;width:80%;margin-left:10%">
      <el-form-item label="报修设备:">
        <el-cascader
        v-model="casValue"
        :options="edTree"
        :props="props"
        @change="casHandleChange"
        clearable
        style="width:100%"></el-cascader>
      </el-form-item>
      <el-form-item label="问题描述:">
        <el-input type="textarea" v-model="form.bill_why"></el-input>
      </el-form-item>
      <el-form-item
      label="上传图片:"
      >
        <el-upload
        class="upload-demo"
        action="http://121.199.29.84:8001/file/upload"
        :on-remove="imgHandleRemove"
        :on-success="imgHandleSuccess"
        :on-exceed="imgOverLimitHandler"
        :file-list="fileList"
        list-type="picture"
        :limit="3">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
         </el-upload>
      </el-form-item>
        <el-button 
        type="primary"
        @click="toCommitHandler">提交</el-button>      
    </el-form>
  </div>
</template>
<script>
import { get,postJSON } from "@/utils/request.js";
export default {
  data(){
    return{
      order:{},
      form:{},
      resData:{},
      devices:{},
      casValue:[],
      edTree:[],
      props:{
        value:"id",
        label:"name",
      },
      fileList:[],
    };
  },
  methods:{
    //查询工程设备树
    findEngineerDeviceTree(){
      get("/engineer/findEngineerDeviceTree").then((res) =>{
        this.edTree=res.data;
      });
    },
    //级联面板改变事件
    casHandleChange(val){
      if(val){
        this.form.engineer_id = val[0];
        this.form.device_id = val[1];
      };
    },
    //上传图片成功
    imgHandleSuccess(res){
      let img = {
        name:res.data.filename,
        url:"http://121.199.29.84:8888/group1/" + res.data.id,        
      };
      this.fileList.push(img);
    },
    //上传图片数量限制
    imgOverLimitHandler(){
      this.$message.warning("最多上传3张图片");
    },
    //图片删除
    imgHandleRemove(file,fileList){
      this.fileList= fileList;
    },
    //提交按钮
    toCommitHandler(){
      //必须上传3张图片
      if(this.fileList.length ==3){
        for(let i=1;i<4;i++){
          this.form["p"+i] = this.fileList[i-1].url;
        }
      //后台接口交互
      postJSON("/workorder/repairOrder",this.form).then((res) =>{
        this.$message.success("提交成功！");
        this.$router.push({
          path:"List",
        });
      });
      }else{
        this.$message.warning("请上传3张图片");
      }
    },

  },
  created(){
    this.order = this.$route.query;
    this.findEngineerDeviceTree();
  },
}
</script>
<style scoped>
.header{
  font-size: 30px;
  text-align: center;
  margin-top: 40px;
}
</style>